@import "@/styles/variables.less";

page {
  background-color: @page-second-color;
}

.start-plan {
  .page-header-right {
    font-size: @size-base;
    font-weight: normal;
    display: flex;
  }
  .finished {
    .record-result {
      color: @primary-color;
      font-weight: bold;
    }
  }
  .start-plan-item {
    font-size: @size-sm;
    margin-bottom: @size-sm;
    padding: @size-sm @size-base;
    box-shadow: @light-shadow;
    display: flex;
  }

  .set-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    .set-number {
      font-size: @size-xs;
      margin-bottom: 4px;
    }
    .set-value {
      font-size: @size-sm;
      white-space: nowrap;
    }
  }

  .start-plan-scroll {
    height: calc(100vh - 180px);
    .start-plan-scroll-inner {
      padding: 0 @size-lg @size-lg @size-lg;
    }
  }

  // 组数单元 SetCell
  .start-plan-item-right {
    margin-left: @size-xs;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
  }
  .start-plan-item-sets {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: @size-3xs;
    .start-plan-item-sets-item {
      position: relative;
      display: flex;
      padding: 14px;
      border-radius: @small-radius;
      transition: all 0.3s ease-in-out;
      border: @light-border;
      &.done {
        opacity: 0.7;
        background-color: #2f8cf629;
      }
      transition: all 0.3s ease-in-out;
    }
  }

  // 计时单元
  .start-plan-item-times {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 20px;
    gap: @size-3xs;
    .start-plan-item-times-item {
      position: relative;
      display: flex;
      padding: 18px 28px 18px 28px;
      background-color: #cfd6f1;
      border-radius: @small-radius;
      border: @light-border;
    }
  }
}
